<template>
    <el-dialog
        width="3.5rem"
        title="监测点位"
        append-to-body
        :visible="visible"
        @update:visible="(val) => $emit('update:visible', val)"
    >
        <el-checkbox-group v-model="val">
            <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{
                item.label
            }}</el-checkbox>
        </el-checkbox-group>
    </el-dialog>
</template>

<script>
import { Dialog, Checkbox, CheckboxGroup } from "@/component/ElementUi";

import { MonitorMap } from "@/view/client/component/TheCesiumMap/data";
const options = Object.entries(MonitorMap).map(([key, value]) => ({
    label: value.name,
    value: key,
}));

export default {
    name: "LayerPicker",
    components: {
        ElDialog: Dialog,
        ElCheckbox: Checkbox,
        ElCheckboxGroup: CheckboxGroup,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        value: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            options,
        };
    },
    computed: {
        val: {
            set(val) {
                this.$emit("input", val);
            },
            get() {
                return this.value;
            },
        },
    },
};
</script>

<style scoped>
h3 {
    border-left: 4px solid #409eff;
    padding-left: .05rem;
}
</style>
